<template>
  <img :src="imgUrl" alt="" ref="imgDom">
</template>

<script>
export default {
    props:{
        // 真实的图片地址
        imghref:String
    },
    data(){
        return {
            imgUrl:''
        }
    },
    methods:{
      // 图片真实被看到的时候， 再把真实的 图片地址赋值在img标签的src属性上
        observerFun(){
            let imgDom = this.$refs.imgDom;
            let observer = new IntersectionObserver(([entry])=>{
                // console.log('图片被看到了');
                
                if(entry.isIntersecting) {
                    // 可见
                    this.imgUrl = this.imghref?.startsWith('https') ? this.imghref :`${process.env.VUE_APP_IMG_SERVER}/upload/${this.imghref}` ;
                    observer.unobserve(imgDom)   // 取消监听
                }
            })
            observer.observe(imgDom)  // 监听imgDom 节点的可见性
        }
    },
    mounted(){
        this.observerFun()
    }

   
}
</script>

<style>

</style>